<template>
  <div>
    <div style="margin-bottom: 10px">
      活动名称：<el-tag>{{ tblActivities.activityName }}</el-tag>
      负责人：<el-tag>{{ tblActivities.leader }}</el-tag>
      被采样单位：<el-tag>{{ tblActivities.beSampleUnits }}</el-tag>
      采样单位：<el-tag>{{ tblActivities.sampleUnits }}</el-tag>
      总人数：<el-tag>{{ tblActivities.totalPeoples }}</el-tag>
      状态：<el-tag type="info" v-if="tblActivities.status === 0">未举行</el-tag>
      <el-tag type="success" v-else-if="tblActivities.status === 1">举行中</el-tag>
      <el-tag type="danger" v-else>结束</el-tag>
    </div>

    <el-form :model="beSample" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="开始时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery('queryForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
    </el-row>

    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="tblUnits.name" label="单位地点" width="200" align="center">
      </el-table-column>
      <el-table-column prop="tblSampleAddress.addressName" label="采样地点" width="220" align="center">
      </el-table-column>
      <el-table-column prop="tblActivitiesAddress.addressNumber" label="窗口号" width="100" align="center">
      </el-table-column>
      <el-table-column label="开始日期" width="160" align="center">
        <template slot-scope="scope">{{ scope.row.sampleBeginTime }}</template>
      </el-table-column>
      <el-table-column label="结束日期" width="160" align="center">
        <template slot-scope="scope">{{ scope.row.sampleEndTime }}</template>
      </el-table-column>
      <el-table-column prop="peoples" label="可预约人数" width="120" align="center">
      </el-table-column>
      <el-table-column prop="orderedPeoples" label="已预约人数" width="120" align="center">
      </el-table-column>
      <el-table-column prop="orderStatus" label="是否可预约" width="120" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.orderStatus === 0">
            <el-tag type="warning">不可预约</el-tag>
          </div>
          <div v-else-if="scope.row.orderStatus === 1">
            <el-tag>可预约</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { getBeSampleUnitsActivitiesByActivitiesId, exportBeSampleUnitsActivitiesRecord, deleteBeSampleUnitsActivities } from "../../api/testManagement/record";

export default {
  name: "BeSampleUnitsActivities",
  data() {
    return {
      tblActivities: {},
      beSample: {
        pageNum: 1,
        pageSize: 10,
        activitiesId: ''
      },
      tableData: [
        {
          beSampleId: '',
          tblUnits: {
            name: ''
          },
          tblSampleAddress: {
            addressName: ''
          },
          tblActivitiesAddress: {
            addressNumber: ''
          },
          sampleBeginTime: '',
          sampleEndTime: '',
          peoples: '',
          orderedPeoples: '',
          orderStatus: ''
        }
      ],
      ids: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      multiple: true,
      dateRange: [],
    }
  },
  created() {
    const tblActivities = this.$route.query && this.$route.query.tblActivities
    if (tblActivities) {
      this.tblActivities = tblActivities
      this.beSample.activitiesId = tblActivities.activitiesId;
      this.getBeSampleUnitsActivitiesByActivitiesId()
    } else {
      this.$router.push({
        path: '/sys/notesmanage',
        query: {
          beSample: true
        }
      })
    }

  },
  methods: {
    getBeSampleUnitsActivitiesByActivitiesId() {
      getBeSampleUnitsActivitiesByActivitiesId(this.beSample).then(res => {
        console.log(res.data)
        this.currentPage = res.data.current
        this.beSample.pageSize = res.data.pageSize
        this.total = res.data.total
        this.tableData = res.data.list
      })
    },
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.activitiesId)
      this.multiple = !selection.length
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.beSample.pageSize = val
      this.getBeSampleUnitsActivitiesByActivitiesId()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.beSample.pageNum = val
      this.getBeSampleUnitsActivitiesByActivitiesId()
    },
    handleDelete(row) {
      const beSampleIds = row.beSampleId || this.ids;
      this.$confirm('是否确认删除记录编号为"' + beSampleIds + '"的数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function () {
        return deleteBeSampleUnitsActivities(beSampleIds);
      }).then(() => {
        this.getBeSampleUnitsActivitiesByActivitiesId()
        this.$message({
          message: "删除成功",
          type: "success"
        })
      })
    },
    handleExport() {
      exportBeSampleUnitsActivitiesRecord(this.beSample).then(res => {
        let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        let filename = window.decodeURI(res.headers['content-disposition']).split('=')[1]
        console.log(filename)
        let url = window.URL.createObjectURL(blob)
        let aLink = document.createElement("a")
        aLink.style.display = "none"
        aLink.href = url
        aLink.setAttribute("download", filename)
        document.body.appendChild(aLink)
        aLink.click()
        document.body.removeChild(aLink)
        window.URL.revokeObjectURL(url)
      })
    },
    handleQuery() {
      console.log(this.dateRange)
      this.beSample.currentPage = 1
      if (this.dateRange) {
        this.beSample.beginTime = this.dateRange[0]
        this.beSample.endTime = this.dateRange[1]
      }
      this.getBeSampleUnitsActivitiesByActivitiesId()
    },
    resetQuery(formName) {
      this.beSample.beginTime = ''
      this.beSample.endTime = ''
      this.dateRange = []
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
</style>
